<template>
	<view class="coupon-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" title="EventDetails"    navType="navBackTitle" backIconColor="#1B1D29"  :iconSize="14">
			</c-navigation-bar>
			<view class="detail">
				<u-parse :html="content"></u-parse>
			</view>
			
		</c-layout>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:"",
				info:{},
				list: [{
						baifenbi: '50%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: '/static/images/activite.png'
					},
					{
						baifenbi: '70%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/18894baf3e370ffd97ea2bd5245429bf5c8d8e39.png'
					},
					{
						baifenbi: '50%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/e2d8a4de4c2119be40137a1a7f94428c253966c8.png'
					},
					{
						baifenbi: '75%',
						youxiaoqi: 'On everything today',
						nianfen: 'With code: rikafashion2021',
						imageSrc: 'https://lcdn-us.icons8.com/c/Jz53sgOJQUOCqmNDY0n1Pg/8e0ab6851ddc64fcfacad6970bb357f911a1da6b.png'
					}
				],
				// 优惠券类型选择
				couponTypePopShow: false,
				// 优惠券类型列表
				couponTypeList: [{
						id: 1,
						val: 'All types'
					},
					{
						id: 2,
						val: 'Shopping voucher'
					},
					{
						id: 3,
						val: 'Shop coupon'
					},
					{
						id: 4,
						val: 'Commodity coupon'
					},
				],
				// 当前选中
				currentType: {
					id: 1
				},
				// 需要提交的
				currentTypeData: {},

			};
		},
		methods: {
			tabsChange(index) {
				this.current = index;
				},
			// 打开选择优惠券类型弹出层
			openSelect() {
				this.currentType = {
					...this.currentTypeData
				}
				this.couponTypePopShow = true
			},
			// 
			changeCurrentTypeData() {
				this.currentTypeData = {
					...this.currentType
				}
				this.couponTypePopShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .nav-search{
		border-bottom: none !important;
	}
	
	/deep/.nav-search .nav-back-title .title{
		font-size: 34rpx;
		font-family: SFUIDisplay-Medium-Regular, SFUIDisplay-Medium;
		font-weight: 400;
		color: #000000;
	}
	.coupon-container {
		.detail{
			padding: 40rpx 48rpx 0rpx 40rpx;
			.event-tittle{
				font-size: 32rpx;
				font-family: SFUIDisplay-Semibold-Regular, SFUIDisplay-Semibold;
				font-weight: 400;
				color: #000000;
			}
			.event-describe{
				font-size: 28rpx;
				font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
				font-weight: 400;
				color: #1B1D29;
			}
			
		}
		.swiper{
			margin-bottom: 60rpx;
			font-size: 36rpx ;
			font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
			font-weight: 400;
			color: #999CAD;	
			margin-left: 30rpx;
		}
		// 	&:nth(2){
		// 		margin-top: 60rpx;
		// }
		.slot-icon {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.coupon-type-pop {
			.popup-main {
				padding: 80rpx 40rpx;
				padding-left: 20rpx;

				.type-tags {
					display: flex;
					flex-wrap: wrap;

					.capsule {
						margin-left: 20rpx;
						margin-bottom: 40rpx;
						white-space: nowrap;
						padding: 0 20rpx;
						height: 68rpx;
						line-height: 68rpx;
						border-radius: 34rpx;
						background: #f5f6f8;
						background-blend-mode: normal;
						font-size: 24rpx;
						color: #c9c9c9;

						&.is-selected {
							color: #fff;
							background-color: #2934d0;
						}
					}
				}

				>button {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
